<template>
    <div class="steam">
        <div class="swiper-tab dis-flex box-align-center flex-y-center">
            <div v-for="item in tabList" class="swiper-tab-item" :class="dataType == item.value ? 'on' : ''"
                 @click="swichNav(item.value)">
                {{ item.text }}
            </div>
        </div>
        <div class="search-main">
            <div class="search-btn" @click="all">全部</div>
            <input type="text" :value="sTime" placeholder="请选择起始时间" @click="showDatePicker" readonly=""></input>
            <div> —</div>
            <input type="text" :value="eTime" placeholder="请选择结束时间" @click="showDatePicker1" readonly=""></input>
            <div class="search-btn" @click="swichNav(dataType)">搜索</div>
        </div>
        <cube-scroll
                ref="scroll"
                class="scroll-body"
                :data="list"
                :options="options"
                @pulling-up="lists"
        >
            <!--            <div style="width: 100vw;height: 20px"></div>-->
            <div class="mteam-list" v-for="item in list">
                <div class="mteam-top">
                    <div class="mteam-left">
                        <img :src="item.user.avatarUrl" class="mteam-pic">
                        <div class="mteam-name">{{item.user.real_name}}</div>
                    </div>
                    <div class="mteam-right">
                        ¥{{item.points}}
                    </div>
                </div>
                <div class="mteam-content">
                    <div class="mteam-bottom">
                        {{item.create_time}}
                    </div>
                    <div v-if="item.bonus!=0" class="mteam-price">
                        收益：+{{item.bonus}}
                    </div>
                </div>
            </div>
            <!-- 没有记录 -->
            <div class="yoshop-notcont" v-if="!list.length && !isLoading">
                <!--                        <div class="iconfont icon-wushuju"></div>-->
                <div class="cont">亲，暂无订单哦</div>
            </div>
        </cube-scroll>
        <div class="steam-foot">
            <div class="steam-foot-list">
                <div class="steam-foot-price">¥{{list.length?list[0].totalPoints:0}}</div>
                <div class="steam-foot-name">累计消费</div>
            </div>
            <div v-if="dataType!=1||tabList.length==1" class="steam-foot-list">
                <div class="steam-foot-price">¥{{list.length?list[0].totalBonus:0}}</div>
                <div class="steam-foot-name">累计收益</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";

    @Component({
        components: {},
    })

    export default class Steam extends Sence {
        public page: number = 1; // 当前页码
        public size: any = 10; // 每页显示的条数
        public sTime: any = ""; // 起始时间
        public seTime: any = ""; // 结束时间的起始时间
        public eTime: any = ""; // 结束时间
        public startTime: any = ""; // 开始结束时间
        public endTime: any = ""; // 结束提交时间
        public options: object = {
            pullUpLoad: true
        };//上拉加载
        public dataType: any = 1;// 选中顶部菜单值
        public tabList: any = [{value: 1, text: "A档"}, {value: 2, text: "B档"}, {value: 3, text: "C档"}];
        public list: any = []; // 列表数据
        public isLoading: boolean = true; // 加载锁

        /**
         * 初始化
         */
        public mounted(): void {
            this.freshUser().then((res: any) => {
                if (res.grade.grade_id == 1) {
                    this.tabList = [{value: 1, text: "A档"}];
                }
            });
            this.lists();
        }

        /**
         * 点击全部事件
         */
        public all(): void {
            this.list = [];
            this.page = 1;
            this.isLoading = true;
            this.sTime = "";
            this.eTime = "";
            this.options = {
                pullUpLoad: true
            };//上拉加载
            this.lists();
        }

        /**
         * 切换选项卡
         */
        public swichNav(value: any): void {
            // if (this.dataType == value) {
            //     return;
            // }
            this.dataType = value;
            this.page = 1;
            this.list = [];
            this.isLoading = true;
            this.lists();
        }

        /**
         * 获取订单信息
         */
        public lists(): void {
            let dateTime: any = new Date(this.endTime);
            dateTime = dateTime.setDate(dateTime.getDate() + 1);
            let startTime: any = this.sTime ? new Date(this.startTime).getTime() * 1 / 1000 : 0;
            let endTime: any = this.eTime ? new Date(dateTime).getTime() * 1 / 1000 : 0;
            this.post("api/user.dealer.order/lists", {
                startTime,
                endTime,
                level: this.dataType,
                page: this.page,
                size: this.size
            }).then((res: any) => {
                this.list = [...this.list, ...res.data.list.data];
                this.page += 1;
                if (res.data.list.data.length < this.size) {
                    this.options = {
                        pullUpLoad: false
                    };//上拉加载
                }
                this.isLoading = false;
            });
        }

        /**
         * 起始时间选择
         */
        public showDatePicker(): void {
            (<any> this).$createDatePicker({
                title: "起始时间",
                min: new Date(2018, 7, 8),
                max: new Date(),
                value: new Date(),
                onSelect: this.selectHandle,
                onCancel: this.cancelHandle
            }).show();
        }

        public selectHandle(date: any, selectedVal: any, selectedText: any): void {
            this.sTime = selectedVal.join("-");
            this.startTime = selectedVal.join("/");
            this.eTime = "";
            this.seTime = selectedVal;
        }

        public cancelHandle(): void {
        }

        /**
         * 结束时间选择
         */
        public showDatePicker1(): void {
            if (this.sTime) {
                (<any> this).$createDatePicker({
                    title: "结束时间",
                    min: this.seTime,
                    max: new Date(),
                    value: new Date(),
                    onSelect: this.selectHandle1,
                    onCancel: this.cancelHandle1
                }).show();
            } else {
                this.toast("请先选择起始时间", "warn");
            }
        }

        public selectHandle1(date: any, selectedVal: any, selectedText: any): void {
            this.eTime = selectedVal.join("-");
            this.endTime = selectedVal.join("/");
        }

        public cancelHandle1(): void {
        }
    }


</script>

<style scoped lang="stylus">
    input {
        outline: none;
        border: 0;
        width 100px;
        height 23px;
        margin 0 10px;
        font-size: 12px;
        text-align center;
    }

    .swiper-tab {
        display flex;
        flex-direction row;
        align-items center;
        width: 100vw;
        text-align: center;
        height: 40px;
        background-color: #fff;
        border-bottom: 1px solid #eee;
    }

    .swiper-tab .swiper-tab-item {
        flex 1
        height 40px;
        font-size: 14px;
        color: #777;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        border-bottom: 2px solid #ffffff00;
    }

    .swiper-tab .on {
        color: #786cff;
        border-bottom: 2px solid #786cff;
    }

    .search-main {
        height 40px;
        padding 0 10px;
        width 100vw;
        background #f2f2f2;
        display flex;
        flex-direction row;
        align-items center;
    }

    .search-btn {
        padding 5px 10px
        background #786cff
        color white
        border-radius 5px
    }

    .steam-foot {
        width 100vw
        background #f2f2f2
        position fixed
        bottom 0
        height 50px
        display flex
        flex-direction row
        justify-content space-around
        align-items center
    }

    .scroll-body
        height calc(100vh - 130px)

    .mteam-list
        margin 0 20px
        display flex
        flex-direction column
        border-bottom 1px solid #f2f2f2
        padding 10px

    .mteam-top
        display flex
        flex-direction row
        justify-content space-between
        align-items center

    .mteam-left
        display flex
        flex-direction row
        align-items center

    .mteam-pic
        width 50px
        height 50px

    .mteam-name
        margin-left 10px
        font-size 16px
        color #515151

    .mteam-right
        color #339933
        font-size 16px

    .mteam-bottom
        color #808080

    .mteam-content
        margin-top 10px
        display flex
        flex-direction row
        justify-content space-between
        align-items center

    .mteam-price
        color red
        font-weight bold

    .yoshop-notcont {
        padding: 65px 50px;
        box-sizing: border-box;
    }

    .yoshop-notcont .cont {
        display: block;
        text-align: center;
        font-size: 30 rpx;
        color: #999;
        margin-top: 10 rpx;
    }

    .steam-foot-list
        display flex
        flex-direction column
        align-items center

    .steam-foot-price
        margin-bottom 6px
        font-size 16px
        color #786cff
        font-weight bold

    .steam-foot-name
        color #808080

</style>
